<template>
  <div class="vip">
    <van-nav-bar class="page-nav-bar navbar" title="个人信息">
      <van-icon
        slot="left"
        name="arrow-left"
        color="#000"
        size="22"
        @click="$router.back()"
      ></van-icon>
    </van-nav-bar>
    <div class="vipMain">
      <h1>Hi,尊敬的{{ this.userInfo.username }}用户</h1>
      <van-cell
        title="个人信息"
        size="large"
        label="基本信息设置"
        is-link
        @click="setUser"
      />
      <van-cell title="手机号码" size="large" label="手机号码" is-link />
      <van-cell
        title="我的地址"
        size="large"
        label="添加地址"
        is-link
        @click="siteShow = true"
      />
      <van-cell title="信息订阅" size="large" label="已订阅" is-link />
      <van-cell title="隐私" size="large" label="更改密码" is-link />
    </div>
    <van-popup v-model="siteShow" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar title="地址信息" right-text="添加" @click-right="addSite">
        <van-icon
          slot="left"
          name="arrow-left"
          color="#000"
          size="22"
          @click="siteShow = false"
        ></van-icon>
      </van-nav-bar>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        disabled-text="以下地址超出配送范围"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </van-popup>
    <van-popup
      v-model="setUserShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <van-nav-bar
        title="基本信息"
        right-text="保存"
        @click-right="onClickRight"
      >
        <van-icon
          slot="left"
          name="arrow-left"
          color="#000"
          size="22"
          @click="setUserShow = false"
        ></van-icon>
      </van-nav-bar>
      <van-form @submit="onSubmit">
        <van-field
          v-model="usernames"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写正确的手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-form>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field
        v-model="age"
        type="number"
        label="年龄"
        placeholder="请输入年龄"
      />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-model="money" type="number" label="我的余额" />
    </van-popup>
  </div>
</template>

<script>
import { getUserinfo, setUserinfo } from "@/api/My.js";
export default {
  created() {
    this.getUserinfo();
  },
  data() {
    return {
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "牛牛",
          tel: "",
          address: "湖南省长沙市岳麓区 138 号东方大厦 5 楼 501 室",
          isDefault: true,
        },
      ],
      disabledList: [],
      siteShow: false,
      userInfo: {},
      setUserShow: false,
      usernames: "",
      password: "",
      date: "",
      show: false,
      age: null,
      radio: "1",
      money: "",
    };
  },
  methods: {
    addSite() {
      console.log("添加");
    },
    onAdd() {
      this.$toast("新增地址");
    },
    onEdit(item, index) {
      this.$toast("编辑地址:" + index);
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    async getUserinfo() {
      const res = await getUserinfo({
        id: this.$store.state.user.UserInfo.id,
      });
      this.userInfo = res.data;
      console.log(this.userInfo);
      var a = this.userInfo.sex;
      var c = this.userInfo.age - 0;
      if (this.userInfo) {
        this.usernames = this.userInfo.username;
        this.password = this.userInfo.password;
        this.age = c;
        this.radio = String(a);
        this.money = this.userInfo.money;
        this.list[0].tel = this.userInfo.username;
      }
    },
    setUser() {
      this.setUserShow = true;
    },
    async onClickRight() {
      var d = this.age - 0;
      try {
        const res = await setUserinfo({
          id: this.$store.state.user.UserInfo.id,
          username: this.usernames,
          password: this.password,
          age: d,
          money: this.money,
          sex: this.radio - 0,
        });
        this.$toast.success("修改成功！");
        console.log(res);
        this.setUserShow = false;
      } catch (error) {
        this.$toast.fail("修改失败，请稍后再试!");
        console.log(error);
      }
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>

<style scoped lang='less'>
.vip {
  padding-bottom: 65px;
  padding-top: 55px;
  background-color: #f2f2f2;
  .navbar {
    position: fixed;
    width: 100%;
    height: 55px;
    line-height: 55px;
    top: 0;
    border-bottom: 1px solid #f5f6f7;
  }
  .vipMain {
    height: 500px;
    margin: 20px;
    h1 {
      text-align: center;
      font-size: 22px;
      font-weight: normal;
    }
    .van-cell__label {
      color: #000;
      font-size: 14px;
      margin: 10px 0 0 0;
    }
    .van-cell__title span {
      font-size: 12px;
      color: #666;
      margin-bottom: 10px;
    }
    .van-cell {
      margin: 10px 0;
      border-radius: 6px;
    }
  }
}
</style>
